import React from 'react';
import classNames from 'classnames';
import Menu from './Menu';

class SubMenu extends React.Component {
    displayName = 'SubMenu';

    render () {
        const {data, offset, onSelectSubMenu, onSelectMenu, level} = this.props;
        const clazzName = classNames('cm-menu-menugroup', data.className);
        const sty = {};
        if (level) {
            sty.paddingLeft = offset * level;
        }
        return <li className={clazzName} style={data.style}>
            <div className='cm-menu-menugroup-title' style={sty}>
                {data.text}
            </div>
            {
                data.children && data.children.length
                    ? <Menu theme='' mode='' onSelectSubMenu={onSelectSubMenu} onSelectMenu={onSelectMenu} 
                        offset={offset} level={this.props.level} 
                        data={data.children} parent={data}/>
                    : null
            }
        </li>;
    }
}

export default SubMenu;
